<!-- 邀请好友绑定 -->
<template>
  <div class="page">
    <div class="intro-wrapper">
      <div>
        <img v-if="status == 1 || status == 2" class="img-responsive center-block banner" src="~assets/images/node/success.png" alt="" />
        <img v-if="status == 3 || status == 4" class="img-responsive center-block banner" src="~assets/images/node/failure.png" alt="" />
      </div>
      <div class="text-wrapper">
        <div class="result-text" v-if="status == 1">
          <p>您已成为超级节点用户</p>
          <p>{{superNodeName}}</p>
          <p>名下矿工，可以正常开启挖矿，</p>
          <p>您的挖矿收益将会有10%上缴给您的超级节点。</p>
        </div>
        <div class="result-text" v-if="status == 2">
          <p>您已成为超级节点用户</p>
          <p>{{superNodeName}}</p>
          <p>名下矿工，可以正常开启挖矿，</p>
          <p>您的挖矿收益将会有10%上缴给您的超级节点。</p>
          <p>官方也会发放你钱包转账手续费的30%给到</p>
          <p>{{superNodeName}} 作为奖励。</p>
        </div>
        <div class="result-text failure-text" v-if="status == 3">
          <p>{{failureText1}}</p>
        </div>
        <div class="result-text failure-text" v-if="status == 4">
          <p>{{failureText2}}</p>
        </div>
        <h3 v-show="status == 1 || status == 2" class="worm-notice">您的矿工身份不会影响您申请成为超级节点</h3>
      </div>
      <div class="bottom-btn">
        <div class="download-bg">
          <a v-if="isIOS" href="https://testflight.apple.com/join/HtU1EG7M">下载人人钱包APP</a>
          <a v-else href="http://appdown.rrys.tv/yqb_latest.apk">下载人人钱包APP</a>
        </div>
        <div class="has-border">
          <a href="https://shimo.im/docs/G39DY9xJWRvXYdDj/read">挖矿教程</a>
        </div>
      </div>


    </div>
    <!--<div @touchmove.prevent class="application-wrapper" v-if="status == 1">
      <p @click="lookActive">申请成为超级节点</p>
    </div>-->
  </div>


</template>

<script>
  // import {getMbAreaCode } from 'api/register'

  export default {
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        vm.detectOS();
        /*let uid = to.query.uid;
        let token = to.query.token;
        let status = to.query.status;
        if (!status) {
          status = 1;
        }
        vm.uid = uid;
        vm.token = token;
        // console.log(status);
        vm.status = Number(status);*/
        Object.assign(vm, to.query)
          vm.superNodeName = decodeURIComponent(vm.superNodeName)
          vm.failureText1 = decodeURIComponent(vm.failureText1)
          vm.failureText2 = decodeURIComponent(vm.failureText2)
      })
    },
    data () {
      return {
        uid: '',
        token: '',
        isIOS: false,
        status: 1,
        superNodeName: '瓜啦啦',
        /*successText1: '',
        successText2: '',*/
        failureText1: '您已填写过超级节点邀请码，同一矿工账号不可被重复邀请！',
        failureText2: '矿工身份绑定失败，请更换邀请码再次绑定。'
      }
    },
    created () {

    },
    methods: {
      getQueryVariable(variable) {
        let query = window.location.href.split('?')[1];
        let vars = query.split('&');
        for (let i = 0; i < vars.length; i++) {
          let pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
        }
      },
      detectOS() {
        let u = navigator.userAgent;
        // console.log(u);
        this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // console.log(this.isIOS);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '~common/scss/index.scss';
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  $color: #5A99FF;
  body {
    height: 100%;
    background: #121D3B;
  }
  .page {
    height: 100%;
    width: 100%;
    background: #121D3B;
    overflow: hidden;
  }
  .intro-wrapper{
    /*height:calc(100% - 98px);*/
    /*overflow-y:auto;*/
  }
  .whole-height{
    height:100%;
  }
  .banner {
    margin-top:-128px;
    /*display: block;
    width: 100%;
    height: 860px;*/
  }

  .text-wrapper{
    text-align:center;
    .result-text{
      p{
        font-size:30px;
        font-weight:600;
        color:rgba(159,209,252,1);
        line-height:1.5;
        background:linear-gradient(10deg,rgba(255,255,255,1) 0%, rgba(181,230,255,1) 100%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
      }
    }
    .failure-text{
      p{
        width:60.06%;
        margin:0 auto;
      }
    }
    h3{
      margin-top:15px;
      font-size:30px;
      font-weight:400;
      color:rgba(159,209,252,1);
    }
  }

  .bottom-btn{
    z-index:99999;
    position:absolute;
    width:100%;
    height:192px;
    left:0;
    right:0;
    bottom:60px;
    >div{
      width:558px;
      height:80px;
      font-size:26px;
      line-height:80px;
      margin:0 auto;
      text-align:center;
      a{
        display:block;
      }
    }
    .download-bg{
      margin-bottom:32px;
      background: url("~assets/images/node/downloadbg.png") no-repeat center center;
      background-size: 100% 100%;
    }
    .has-border{
      border:1px solid rgba(159,209,252,1);
      border-radius:40px;
      a{
        color:#9FD1FC;
      }
    }
  }

  .img-responsive{
    display:block;
    max-width:100%;
    height:auto;
  }
  .center-block{
    display:block;
    margin:0 auto;
  }

  .not-whole-width{
    width:85.92%;
    margin-bottom:-18px;
  }


  .cube-scroll-wrapper{
    background:transparent!important;
  }
  .cube-popup .cube-popup-mask{
    opacity:0.5;
    background-color:#000;
  }



  .center-block{
    display:block;
    margin:0 auto;
  }
  .img-responsive{
    display:block;
    max-width:100%;
    height:auto;
  }

  .banner {
    margin-top:-128px;
    /*display: block;
    width: 100%;
    height: 860px;*/
  }











</style>
